<template>
  <div class="content">
    <Header />
    <div class="job-banner">
      <div class="job-inner">
        <div class="job-info">
          <h1>{{this.name}}</h1>
          <span class="wage-color">{{wageRange}}</span>
          <span class="divide">|</span>
          <span>{{this.city}}</span>
          <span class="divide">|</span>
          <span>{{yearRange}}</span>
          <span class="divide">|</span>
          <span>{{degreeCn}}</span>
        </div>
        <div class="btn-cllection">
          <div class="btn" @click="submitResume">投递简历</div>
        </div>
      </div>
    </div>
    <div class="job-detail">
      <h3>职位描述：</h3>
      <p>{{this.jobDesc}}</p>
      <h3 class="company-intro">公司介绍：</h3>
      <p>{{this.companyDesc}}</p>
    </div>
    <div class="chartbox">
      <div id="main"></div>
      <div id="submain"></div>
    </div>

  </div>
</template>

<script>
import Header from '../components/common/Header'
import reqeust from '@/api'
import { mapState } from 'vuex'
import * as echarts from 'echarts';

export default {
  name: 'JobDetail',
  components: {
    Header
  },
  data() {
    return {
      name: '',
      minWage: '',
      maxWage: '',
      minYear: '',
      maxYear: '',
      degree: '',
      city: '',
      jobDesc: '',
      companyDesc: '',
      chartDom: '',
      myChart: '',
      option : {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      },
      pieDom: '',
      pieChart: '',
      pieOption: {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  created() {
    this.getJobInfo()
    this.getCompanyInfo()
  },
  computed: {
    ...mapState(['userId']),
    wageRange() {
      return `${this.minWage}K-${this.maxWage}K`
    },
    yearRange() {
      return `${this.minYear}-${this.maxYear}年`
    },
    degreeCn() {
      switch (this.degree) {
        case 'bachelor':
          return '本科'
        case 'master':
          return '研究生'
        case 'doctor':
          return '博士生'
        default:
          return '专科'
      }
    }
  },
  methods: {
    async getJobInfo() {
      try {
        const { id } = this.$route.params
        const { data } = await reqeust.get(`/recruitmentid/${id}`)
        console.log("详情页data:",data);
        this.name = data.content.name
        this.minWage = data.content.minWage
        this.maxWage = data.content.maxWage
        this.maxYear = data.content.maxYear
        this.minYear = data.content.minYear
        this.degree = data.content.degree
        this.jobDesc = data.content.desc
        this.city = data.content.city
      } catch (err) {
        console.log(err)
      }
    },
    async getCompanyInfo() {
      try {
        const { id } = this.$route.params
        const { data } = await reqeust.get(`/company/recruitment/${id}`)
        console.log("详情页另一个data：",data);
        this.companyDesc = data.company.desc
      } catch (err) {
        console.log(err)
      }
    },
    async submitResume() {
      try {
        const { id } = this.$route.params
        await reqeust.post(`/recruitments/${id}/resume`, { userId: this.userId })
        this.$message({
          showClose: true,
          message: '投递成功',
          type: 'success'
        })
      } catch (err) {
        console.log(err)
      }
    },
    draw(){
      this.chartDom = document.getElementById('main')
      this.myChart = echarts.init(this.chartDom);
      this.option && this.myChart.setOption(this.option);
    },
    drawPie(){
      this.pieDom = document.getElementById('submain')
      this.pieChart = echarts.init(this.pieDom);
      this.pieOption && this.pieChart.setOption(this.pieOption);
    }
  },
  mounted () {
    this.draw();
    this.drawPie();
  }
}
</script>

<style scoped>
.content {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: absolute;
}

.job-banner {
  height: 150px;
  background-color: #f2f5f4;
  box-sizing: border-box;
}

h1 {
  font-weight: 500;
  margin-bottom: 20px;
}

h3 {
  font-weight: 700;
  font-size: 16px;
  color: #424a5e;
  margin-bottom: 15px;
}

.job-inner {
  width: 1000px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.job-info span {
  color: #555;
  font-size: 17px;
}

.wage-color {
  color: #fd5f39;
}

.divide {
  padding: 0 10px;
}

.btn-cllection {
  padding-top: 20px;
}

.btn {
  display: inline-block;
  margin-right: 17px;
  width: 130px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border: 1px solid #00b38a;
  border-radius: 3px;
  font-size: 18px;
  background-color: #00b38a;
  color: #fff;
  cursor: pointer;
}

.btn:hover {
  background-color: #00a57f;
}

.job-detail {
  width: 1000px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.company-intro {
  margin-top: 40px;
}
.chartbox{
  width: 1000px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
}
#main{
  flex: 40%;
  width: 400px;
  height: 300px;
  /* margin-right: 100px; */
  /* background-color: red; */
}
#submain{
  flex: 60%;
  width: 600px;
  height: 300px;
  /* background-color: green; */
}
</style>